<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>chat</title>
    <style>

        * {
            margin: 0;
            padding: 0;

        }


        .chat_room {
            display: flex;
            flex-direction: column;
            position: relative;
            width: 800px;
            margin: 12px auto;
            border: 1px solid #ccc;
            background-color: #ccc;
        }

        .chat_item {
            display: flex;
            position: relative;
        }

        .chat_friend {
            flex-direction: row;
        }

        .chat_myself {
            flex-direction: row-reverse;
        }

        /*聊天小 icon */
        .chat_friend::before {
            content: "";
            border-radius: 4px;
            position: absolute;
            top: 15px;
            border: 6px solid #fff;
            left: 60px;
            transform: rotate(
                    -45deg
            );
        }

        .chat_myself::before {
            content: "";
            border-radius: 4px;
            position: absolute;
            top: 15px;
            border: 6px solid #95EC69;
            right: 60px;
            transform: rotate(
                    -45deg
            );
        }


        /* 头像布局 */
        .avatar {
            margin: 4px 10px;
        }

        .avatar img {
            border: 1px solid transparent;
            border-radius: 8px;
            width: 40px;
            height: 40px;
        }

        /**
         聊天内容布局
         */

        .content {
            border: 1px solid transparent;
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            /*flex: 7;*/
            padding: 8px 12px;
            margin: 4px 0px;
        }

        .friend_content {
            background-color: #fff;
        }

        .myself_content {
            background-color: #95EC69;
        }


        .content .content_data p {
            max-width: 650px;
            height: 20px;
            line-height: 20px;
            margin: 2px 0;
        }

    </style>
</head>
<body>
<div>
    这是聊天室
</div>
<div class="chats">
    <div class="chat_room">
        <div class="chat_item chat_friend">
            <div class="avatar">
                <img src="friend.jpg">
            </div>
            <div class="content friend_content">
                <div class="content_data">
                    <p>
                        every one
                    </p>
                </div>
            </div>
        </div>
        <div class="chat_item chat_friend">
            <div class="avatar">
                <img src="friend.jpg">
            </div>
            <div class="content friend_content">
                <div class="content_data">
                    <p>
                        every one
                    </p>
                </div>
            </div>
        </div>

        <div class="chat_item chat_myself">
            <div class="avatar">
                <img src="myself.jpg">
            </div>
            <div class="content  myself_content">
                <div class="content_data">
                    <p>
                        ListUserOrderDsosubDetail = userOrderMapper.selecListUserOrderDsosubDetail = userOrderMapper.selecListUserOrderDsosubDetail = userOrderMapper.selec
                    </p>

                    <p>
                        tUserOrderSubDetail("9b95ade89def4916a0fdb0d92591ec33");
                    </p>
                    <p>
                        tUserOrderSubDetail("9b95ade89def4916a0fdb0d92591ec33");
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>